<template>
    <el-dialog
      :title="isEdit ? '编辑菜单' : parentMenu ? `添加子菜单 - ${parentMenu.menuName}` : '添加根菜单'"
      :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
      width="600px"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="菜单名称" prop="menuName" required>
          <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="菜单编码" prop="menuCode" required>
          <el-input v-model="form.menuCode" placeholder="请输入菜单编码" />
        </el-form-item>
        <el-form-item label="菜单路径" prop="url">
          <el-input v-model="form.url" placeholder="请输入菜单路径" />
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="form.icon" placeholder="请输入图标类名">
            <template #append>
              <el-button @click="showIconSelector">选择图标</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="显示顺序" prop="orderNum">
          <el-input-number v-model="form.orderNum" :min="0" />
        </el-form-item>
        <el-form-item label="是否显示" prop="visible">
          <el-radio-group v-model="form.visible">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="$emit('update:modelValue', false)">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { ref, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  
  const props = defineProps({
    modelValue: {
      type: Boolean,
      required: true
    },
    menuData: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    parentMenu: {
      type: Object,
      default: null
    }
  })
  
  const emit = defineEmits(['update:modelValue', 'confirm'])
  
  const form = ref({
    id: undefined,
    menuName: '',
    menuCode: '',
    parentId: null,
    url: '',
    icon: '',
    orderNum: 0,
    visible: 1
  })
  
  const formRef = ref()
  
  const rules = {
    menuName: [
      { required: true, message: '请输入菜单名称', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
    ],
    menuCode: [
      { required: true, message: '请输入菜单编码', trigger: 'blur' },
      { min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
    ],
    url: [
      { pattern: /^\//, message: '路径必须以/开头', trigger: 'blur' }
    ]
  }
  
  // 显示图标选择器
  const showIconSelector = () => {
    // 实现图标选择器逻辑
  }
  
  // 确认提交
  const handleConfirm = async () => {
    try {
      await formRef.value.validate()
      emit('confirm', form.value)
    } catch (error) {
      console.error('表单验证失败:', error)
    }
  }
  
  // 监听props变化
  watch(() => props.menuData, (val) => {
    form.value = { ...val }
  }, { immediate: true })
  
  watch(() => props.parentMenu, (val) => {
    if (val) {
      form.value.parentId = val.id
    }
  }, { immediate: true })
  </script>